@use 'variables' as *;

html.darkmode-active {
  background-color: $gray-600;
  color: $gray-100;
  color-scheme: dark;

  body {
    color: $gray-100;
    background-color: $gray-600;

    a {
      color: $gray-100;
      border-color: $gray-100;

      &:hover,
      &:active {
        border-color: $magenta;
      }
    }

    code {
      background: $gray-500;
    }

    .header {
      .preface {

        .theme-toggle {
          background: $black-transparent;

          &-icon {

            svg {
              color: $white;
            }

            .icon-tabler-sun-high {
              display: inline-block;
            }

            .icon-tabler-moon {
              display: none;
            }
          }
        }

        a.github-corner {
          fill: $black-transparent;
        }
      }

      .title a {
        color: $gray-50;
      }
    }

    .form {
      textarea {
        background: $gray-500;
        border-color: $gray-500;
        color: $gray-100;
      }

      .color-picker-button {
        background: $black-transparent;
        color: $gray-100;
      }
    }

    #clr-picker {
      background-color: $black;

      &:before {
        color: $black;
      }

      input.clr-color {
        background-color: $gray-600;
        border-color: $gray-500;
      }
    }

    .palettes {
      .palette-controls {

        .step-selector-option {
          background: $black-transparent;
          color: $gray-100;

          &.is-active {
            box-shadow: inset 0 0 0 1px $gray-500;
            opacity: 1;
            background: $black;
          }

          &:not(.is-active):hover,
          &:not(.is-active):active {
            background: $black;
          }
        }

        .action-button {
          background: $black-transparent;
          color: $gray-100;

          &:hover,
          &:active {
            background: $black;
          }
        }

        .action-button-toggle.is-active {
          border-color: $gray-400;
          box-shadow: inset 0 0 0 1px $gray-500;
          background: $black;
        }
      }

      #tints-and-shades {
        .palette-name-row td {
          color: $gray-100;
        }
      }
    }

    .export-dialog {
      background: $gray-600;
      color: $gray-100;
      border-color: $gray-600;

      .export-close {
        color: $gray-100;
      }

      .export-tab {
        color: $gray-300;

        &.is-active {
          border-color: transparent;
          color: $gray-50;
          background-color: $black-transparent;
        }
      }

      .export-body .export-output {
        border-color: transparent;
        background: $black-transparent;
      }
    }

    .not-found {
      background: $black-transparent;
      color: $gray-100;
    }
  }
}